{% extends '../common/common.html' %}

{% block title %}Django | 编辑文章{% endblock %}
{% block header %}
{% load static %}
    <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
    <script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/webupload/webuploader.css' %}">

{% endblock %}

{% block content-header %}
<h1>
    编辑文章
    <small>Optional description</small>
</h1>
<ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
    <li class="active">Here</li>
</ol>
{% endblock %}
{% block content %}
    <form method="post" id="form-add">
    <div class="row">
        <div class="col-md-9">
            {% csrf_token %}
            <div class="form-group">
                <input type="text" name="title" value="{{ info.title }}" class="form-control input-lg" placeholder="名称">
            </div>
{#            <div class="form-group">#}
{#                <textarea type="text" name="summary" rows="5" class="form-control" placeholder="描述">{{ info.summary }}</textarea>#}
{#            </div>#}
            <div class="form-group">
                <textarea name="content">{{ info.content }}</textarea>
                <script>
                    CKEDITOR.replace( 'content' , {uiColor: '#9AB8F3',height: 400});
                </script>
            </div>

        </div>
        <div class="col-md-3">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">添加</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label class="control-label text-left">状态：</label>
                        <select name="status" class="form-control" style="width: auto; display: inline-block;">
                            <option value="1" {% if info.status == 1 %}selected{% endif %}>正常</option>
                            <option value="2" {% if info.status == 2 %}selected{% endif %}>已下架</option>
                        </select>
                    </div>
                </div>
                <div class="box-footer clearfix">
                    <button type="submit" id="submit" class="btn btn-primary pull-right">更新</button>
                </div>
            </div>
            <!--/box-->
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">分类目录</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">

                    <div class="category-div">
                        <div class="nav-tabs-custom-custom">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">所有分类目录</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab_1">

                                    <div class="category-check-list">
                                        <ul>
                                            {%  for v in cates %}
                                                <li><label><input type="radio" name="cid" value="{{ v.id }}" {% if info.cid == v.id %}checked{% endif %}> <span>{{ v.name }}</span></label></li>
                                            {% endfor %}
                                        </ul>
                                    </div>

                                </div>
                                <!-- /.tab-pane -->
                            </div>
                            <!-- /.tab-content -->
                        </div>
                    </div>

                </div>
            </div>
            <!--/.box-->



            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">封面图片</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    <div id="uploader" class="wu-example">
                        <!--用来存放文件信息-->
                        <div id="thelist" class="uploader-list"></div>
                        <div class="container">
                            <div class="btns row">
                                <div class="col-sm-2">
                                    <div id="picker">选择文件</div>
                                </div>
                                <input type="hidden" id="head_img" name="head_img">
{#                                <div class="col-sm-1">#}
{#                                    <button type="button" id="ctlBtn" class="btn btn-default">开始上传</button>#}
{#                                </div>#}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/.box-->
        </div>
    </div>
</form>
{% endblock %}

{% block footer %}
    <script src="{% static 'plugins/webupload/webuploader.nolog.min.js' %}"></script>
    <script>
        var uploader = WebUploader.create({
            auto: true,
            // 文件接收服务端。
            server: "{% url 'common:commonUpload' %}",

            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 当有文件被添加进队列的时候
        uploader.on( 'fileQueued', function( file ) {
            var $list = $("#thelist");
            var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info" style="display:none">' + file.name + '</div>' +
                            '</div>'
                    ),
                    $img = $li.find('img');
            $list.append( $li );
            var thumbnailWidth = 100,thumbnailHeight=100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });
        uploader.on( 'uploadSuccess', function( file, response ) {
            $("#head_img").val(response.url)
        });
    </script>
{% endblock %}